<template>
  <div class="companydynamics-wrapper">
    <div class="__bg customerservice" :style="{backgroundImage:'url('+imgData[0]+')'}">
      <div class="customerservice-text-wrap">
        <div class="customerservice-text01">客户服务中心</div>
        <div class="customerservice-text02">CUSTOMER SERVICE CENTER</div>
      </div>
    </div>
    <div class="companydynamics-02-wrapper">
      <div class="letter-wrap">
        <div class="letter-text01">首页 > 客户服务中心</div>
        <div class="letter-title">致学员的一封信</div>
        <div class="__bg letter-content" :style="{backgroundImage:'url(' + imgData[1]+ ')'}">
          <div
            class="letter-content1"
          >腾科IT教育集团是广州腾科网络技术有限公司旗下运营的网站平台。腾科是一家以提供新型、领先的IT技术培训（教育）解决方案为主要经营目标的专业公司。目前，腾科是思科(Cisco)、甲骨文(Oracle)、红帽(Red Hat)、华为(Huawei)、微软（Microsoft）、美国计算机行业协会（CompTIA）等国际知名IT厂商的合作伙伴，并且是其指定的授权培训和考试中心；另外还是Pearson VUE国际电子考试中心、普尔文(Prometric)国际IT认证考试中心、达索(solidworks)、安氏(LinkTrust)的授权经销商、共青团中央青年就业创业基地。同时腾科也与国内华南理工大学、华南师范大学、上海理工大学、深圳大学、长江大学、浙江工业大学等众多高等院校，立足于取之于高校、铸之于腾科、用之于企业的新理念，积极开展IT认证技能培训和IT职业课程教育，培养新型IT高级人才。</div>
          <br />
          <div class="letter-content2">腾科向企业和IT从业人员提供众多高端IT培训课程。职业认证集中学习式培训、量身定做企业定制式培训、言传身教实地辅导式培训。</div>
          <br />
          <div
            class="letter-content3"
          >腾科提供IT咨询和IT外包服务，曾为广东省物价局等政府机关、海尔集团等企业提供IT咨询和软件开发服务，是2010年广州亚运会场馆驻场网络运维工程师提供商。</div>
          <br />
          <br />
          <div class="letter-content4">董事长：</div>
          <div class="letter-content4">日期：</div>
        </div>
      </div>
      <div class="__bg process-wrap" :style="{backgroundImage:'url(' + imgData[7]+ ')'}">
        <div class="trainingProcess">
          <div class="trainingProcess-title">培训服务流程</div>
          <div class="trainingProcess-text">
            <div class="trainingProcess-text01 t1"><span class="text">缴费报名</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <!-- <div class="trainingProcess-text01">教务发送培训资料</div> -->
npm

            <div class="trainingProcess-text01 t2"><span class="text">教务发送<br/>培训资料</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <div class="trainingProcess-text01 t3"><span class="text">预约排课</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <div class="trainingProcess-text01 t4"><span class="text">加入班群</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <div class="trainingProcess-text01 t5"><span class="text">正式开班</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <div class="trainingProcess-text01 t6"><span class="text">培训</span></div>
            <img src="./img/go.png" class="trainingProcess-text-line" />
            <div class="trainingProcess-text01 t7"><span class="text">结课</span></div>
          </div>
        </div>
        <div class="process-line"></div>
        <div class="examinationProcess trainingProcess">
          <div class="examinationProcess-title trainingProcess-title">考试服务流程</div>
          <div class="examinationProcess-text trainingProcess-text">
            <div class="examinationProcess-text01 trainingProcess-text01 t8"><span class="text">缴费报名</span></div>
            <img src="./img/go.png" class="examinationProcess-text-line" />
            <div class="examinationProcess-text01 trainingProcess-text01 t9"><span class="text">教务发送<br />复习资料</span></div>
            <img src="./img/go.png" class="examinationProcess-text-line" />
            <div class="examinationProcess-text01 trainingProcess-text01 t10"><span class="text">预约排课</span></div>
            <img src="./img/go.png" class="examinationProcess-text-line" />
            <div class="examinationProcess-text01 trainingProcess-text01 t11"><span class="text">加入班群</span></div>
            <img src="./img/go.png" class="examinationProcess-text-line" />
            <div class="examinationProcess-text01 trainingProcess-text01 t12"><span class="text">正式开班</span></div>
            <img src="./img/go.png" class="examinationProcess-text-line" />
            <div class="examinationProcess-text01 trainingProcess-text01 t13"><span class="text">培训</span></div>
          </div>
        </div>
      </div>
      <div class="plan-wrap">
        <div class="plan-title">开班计划</div>
        <div class="plan-all">
          <div class="plan-content">
            <div class="plan-information-wrapper">
              <div class="plan-code">190921</div>
              <div class="plan-name">HCIA-BD</div>
              <div class="plan-teacher">吴老师</div>
            </div>
            <div class="plan-status">已结课</div>
          </div>
          <div class="plan-content1">
            <div class="plan-information-wrapper1">
              <div class="plan-code1">190921</div>
              <div class="plan-name1">HCIA-BD</div>
              <div class="plan-teacher1">吴老师</div>
            </div>
            <div class="plan-status1">已结课</div>
          </div>
          <div class="plan-line"></div>
          <div class="plan-content2">
            <div class="plan-information-wrapper2">
              <div class="plan-code2">190921</div>
              <div class="plan-name2">HCIA-BD</div>
              <div class="plan-teacher2">吴老师</div>
            </div>
            <div class="plan-status2">已结课</div>
          </div>
        </div>
      </div>
      <div class="study1-wrap">
        <div class="__bg studyMaterials-wrap1" :style="{backgroundImage:'url(' + imgData[2]+ ')'}">
          <div class="studyMaterials">学习资料</div>
          <div class="studylook">去看看>></div>
        </div>
        <div class="__bg examinationMaterials-wrap2" :style="{backgroundImage:'url(' + imgData[3]+ ')'}">
          <div class="examinationMaterials">考试题库</div>
          <div class="examinationlook">去看看>></div>
        </div>
      </div>
      <div class="report-wrap">
        <div class="report-title">考试战报</div>
        <div class="report-list">
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
          <div class="report-list-text">
            <div class="report-list-text1">高级运维工程师</div>
            <div class="report-list-date">2018-12-04</div>
          </div>
        </div>
      </div>
      <div class="phone-wrap" :style="{backgroundImage:'url(' + imgData[4]+ ')'}">
        <div class="phone-title">服务中心</div>
        <div class="phone-content-wrap">
          <div class="__bg phone-content">
            <div class="phoneimg">
              <img src="./img/phoneimg.png" />
            </div>
            <div class="phone-text-wrap">
              <div class="phone-text">服务专线</div>
              <div class="phone-number">400-1024-400</div>
            </div>
          </div>
          <div class="__bg email-content">
            <div class="emailimg">
              <img src="./img/imailimg.png" />
            </div>
            <div class="email-text-wrap">
              <div class="email-text">邮箱</div>
              <div class="email-number">tk@technech.com</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import banner from "./img/banner.jpg"
import letterbg from "./img/letterbg.png"
import processbg from "./img/processbg.png"
import studyimg01 from "./img/studyimg01.png"
import studyimg02 from "./img/studyimg02.png"
import cpcontact from "./img/cpcontact.png"
import base01 from "./img/base01.png"
import base02 from "./img/base02.png"
export default {
    data(){
        return {
            imgData:[banner,letterbg,studyimg01,studyimg02,cpcontact,base01,base02,processbg],
        };
  },
}
</script>
<style lang="stylus">
.__bg{
    background-size auto 100%
    background-repeat no-repeat
    background-position center center
}
.customerservice {
  width: 1440px;
  height: 480px;
  padding-top: 139px;
}

.customerservice-text-wrap {
  position: relative;
  margin-left: 119px;
  .customerservice-text01 {
    font-size: 28px;
    line-height: 40px;
    color: #f4f4f4;
    margin-bottom: 21px;
  }

  .customerservice-text02 {
    font-family: Humanist521BT-Light;
    font-size: 24px;
    line-height: 17px;
    color: #c9c9c9;
  }
}

.companydynamics-02-wrapper {
  padding: 0 120px 0 120px;

  .letter-wrap {
    z-index: 999;
    width: 1200px;
    height: 783px;
    margin-top: -135px;
    background-color: #ffffff;

    .letter-text01 {
      font-family: MicrosoftYaHeiLight;
      font-size: 12px;
      line-height: 40px;
      color: #666666;
      margin-left: 1048px;
      margin-bottom: 19px;
    }

    .letter-title {
      font-size: 28px;
      line-height: 40px;
      color: #1b1b1b;
      margin-left: 516px;
      margin-bottom: 38px;
    }

    .letter-content {
      width: 1040px;
      height: 575px;
      margin-left: 80px;
      padding: 80px;
      font-size: 14px;
      line-height: 30px;
      color: #333333;

      .letter-content4 {
        text-align: right;
      }
    }
  }

  .process-wrap {
    margin-bottom: 20px;
    width: 1200px;
    min-height: 574px;
    background-color: #f7e4e1;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position center center;
    padding 70px 80px;
    .trainingProcess-title {
      font-size: 28px;
      line-height: 40px;
      color: #1b1b1b;
      margin-bottom: 40px;
    }
    .trainingProcess-text {
      display: flex;
      align-items: center;
      color: #ff3343;
      flex-wrap wrap
      .trainingProcess-text01 {
        width: 98px;
        height: 98px;
        display flex
        justify-content center;
        align-items center;
        position relative
        font-size: 16px;
        border-radius: 50%;
        background: #f7e4e1;
        & >.text{
          font-size: 16px;
          width 100%
          height 100%;
          display flex
          justify-content center;
          align-items center;
          border-radius: 50%;
          position relative
          z-index 1
          background: #f7e4e1;
        }
        &:after{
          position absolute;
          top: -12px; 
          bottom: -12px;
          left: -12px;
          right: -12px;
          background: linear-gradient(-45deg,#ffb1ae 0%,#f2888e 50%, #ec7781 100%);
          content: '';
          border-radius: 50%;
        }
      }
      //这里开始，给每个圈重写background
      .t1:after{
        background:#ff5c69
      }
      .t2:after{
        border-image-source: linear-gradient(90deg, #ffb1ae 0%, #f59195 50%,#ec7781 100%);
      }
     .t8:after{
       background:#ff5c69
     }
    }
  }

  .process-line {
    width: 1041px;
    height: 1px;
    border: dashed 1px #d8d4d4;
    margin-top: 40px;
    margin-bottom: 37px;
  }
  .plan-wrap {
    width: 1200px;
    height: 388px;
    background-color: #ffffff;
    padding: 71px 40px 0 40px;

    .plan-title {
      margin: 0 0 40px 545px;
      font-size: 28px;
      line-height: 40px;
      color: #1b1b1b;
    }

    .plan-all {
      display: flex;
    }

    .plan-content {
      display: flex;
      width: 373px;
      height: 180px;
      background-color: #db0801;
      border: solid 1px #e2b8ad;
      padding: 40px 55px 0 40px;

      .plan-information-wrapper {
        .plan-code {
          font-size: 16px;
          color: #cfcfcf;
        }

        .plan-name {
          font-family: MicrosoftYaHei-Bold;
          font-size: 24px;
          line-height: 40px;
          color: #ffffff;
          margin: 10px 0 10px 0;
        }

        .plan-teacher {
          font-size: 16px;
          text-align: center;
          color: #cfcfcf;
          width: 93px;
          height: 30px;
          background-color: #d05753;
        }
      }

      .plan-status {
        width: 82px;
        height: 50px;
        background-color: #484848;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        margin-left: 90px;
        margin-top: 20px;
      }
    }

    .plan-content1 {
      display: flex;
      width: 367px;
      margin-left: 30px;
      padding-top: 40px;

      .plan-information-wrapper1 {
        .plan-code1 {
          font-size: 16px;
          color: #cfcfcf;
        }

        .plan-name1 {
          font-family: MicrosoftYaHei-Bold;
          font-size: 24px;
          line-height: 40px;
          color: #db0801;
          margin: 10px 0 10px 0;
        }

        .plan-teacher1 {
          font-size: 16px;
          line-height: 30px;
          text-align: center;
          color: #666666;
          width: 93px;
          height: 30px;
          background-color: #e1e1e1;
        }
      }

      .plan-status1 {
        width: 82px;
        height: 50px;
        background-color: #db0801;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        margin-left: 90px;
        margin-top: 20px;
      }
    }

    .plan-line {
      margin-top: 40px;
      width: 1px;
      height: 100px;
      background-color: #dcdcdc;
      margin-right: 56px;
    }

    .plan-content2 {
      display: flex;
      padding-top: 40px;

      .plan-information-wrapper2 {
        .plan-code2 {
          font-size: 16px;
          color: #cfcfcf;
        }

        .plan-name2 {
          font-family: MicrosoftYaHei-Bold;
          font-size: 24px;
          line-height: 40px;
          color: #db0801;
          margin: 10px 0 10px 0;
        }

        .plan-teacher2 {
          font-size: 16px;
          line-height: 30px;
          text-align: center;
          color: #666666;
          width: 93px;
          height: 30px;
          background-color: #e1e1e1;
        }
      }

      .plan-status2 {
        width: 82px;
        height: 50px;
        background-color: #484848;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        background-color: #008766;
        margin-left: 90px;
        margin-top: 20px;
      }
    }
  }

  .study1-wrap {
    widows: 1200px;
    height: 280px;
    background: pink;
    display: flex;

    .studyMaterials-wrap1 {
      width: 600px;
      height: 280px;
      background-size: 100% auto;
      padding: 97px 0 0 240px;

      .studyMaterials {
        font-size: 24px;
        line-height: 40px;
        color: #ffffff;
      }

      .studylook {
        margin-top: 32px;
        width: 120px;
        height: 42px;
        border: solid 2px #f4f4f4;
        font-size: 14px;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
      }

      .studylook:hover {
        border: none;
        background-color: #db0801;
      }
    }

    .examinationMaterials-wrap2 {
      padding: 97px 0 0 240px;
      width: 600px;
      height: 280px;
      background-size 100% auto;  
      .examinationMaterials {
        font-size: 24px;
        line-height: 40px;
        color: #ffffff;
      }

      .examinationlook {
        margin-top: 32px;
        width: 120px;
        height: 42px;
        border: solid 2px #f4f4f4;
        font-size: 14px;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
      }

      .examinationlook:hover {
        border: none;
        background-color: #db0801;
      }
    }
  }

  .report-wrap {
    width: 1200px;
    height: 445px;
    background-color: #ffffff;
    padding: 70px 40px 0 40px;

    .report-title {
      height: 40px;
      text-align: center;
      font-size: 28px;
      line-height: 40px;
      color: #1b1b1b;
      margin-bottom: 40px;
    }

    .report-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 70px;

      .report-list-text {
        padding: 40px 0 40px 37px;
        width: 373px;
        height: 119px;
        background-color: #ffffff;
        border: solid 1px #dcdcdc;

        .report-list-text1 {
          font-size: 16px;
          color: #333333;
          margin-bottom: 12px;
        }

        .report-list-date {
          font-size: 14px;
          color: #666666;
        }
      }

      .report-list-text:hover {
        background-color: #e0e0e0;
      }
    }
  }

  .phone-wrap {
    width: 1200px;
    height: 279px;
    background-color: red;
    block-size: 100% auto;
    opacity: 0.5;
    padding: 60px 235px 71px 234px;

    .phone-title {
      height: 28px;
      margin-bottom: 62px;
      font-size: 28px;
      text-align: center;
      line-height: 28px;
      color: #ffffff;
    }
  }

  .phone-content-wrap {
    display: flex;
    justify-content: space-between;

    .phone-content {
      display: flex;

      .phoneimg {
        width: 62px;
        height: 62px;
        margin-right: 20px;
        background-color: #da0800;
        text-align: center;
        margin-top: 12px;
        padding-top: 14px;
      }

      .phone-text-wrap {
        .phone-text {
          font-size: 16px;
          line-height: 40px;
        }

        color: #ffffff;

        .phone-number {
          font-family: Arial-BoldMT;
          font-size: 30px;
          line-height: 40px;
          color: #ffffff;
        }
      }
    }

    .email-content {
      display: flex;

      .emailimg {
        width: 62px;
        height: 62px;
        margin: 12px 20px 0 0;
        background-color: #da0800;
        text-align: center;
        padding-top: 14px;
      }

      .email-text {
        font-size: 16px;
        line-height: 40px;
        color: #ffffff;
      }

      .email-number {
        font-family: Arial-BoldMT;
        font-size: 30px;
        line-height: 40px;
        color: #ffffff;
      }
    }
  }
}
// @media screen (min-width:769px){
//   .trainingProcess-text01{
//     width: 80px;
//     height: 80px;
//   }
// }

</style>